<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复习计划</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #165DFF;
            text-align: center;
            margin-bottom: 30px;
        }
        .review-item {
            border: 1px solid #E5E7EB;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        .review-item:hover {
            box-shadow: 0 4px 12px rgba(22, 93, 255, 0.1);
            transform: translateY(-2px);
        }
        .review-item h3 {
            margin-top: 0;
            color: #1F2937;
        }
        .review-item .level {
            display: inline-block;
            padding: 4px 8px;
            background-color: #E4E7FF;
            color: #165DFF;
            border-radius: 4px;
            font-size: 14px;
            margin-right: 10px;
        }
        .review-item .date {
            color: #6B7280;
            margin-bottom: 8px;
            display: block;
        }
        .review-item .days {
            font-weight: 600;
            color: #165DFF;
        }
        .no-data {
            text-align: center;
            padding: 40px;
            color: #6B7280;
        }
        .back-btn {
            background-color: #165DFF;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            display: block;
            margin: 30px auto 0;
        }
    </style>
</head>
<body>
    <h1>复习计划</h1>
    <div id="reviewContainer"></div>
    <button class="back-btn" onclick="window.location.href='index.html'">返回主页面</button>

    <script src="js/progress.js"></script>
    <script src="js/data.js"></script>
    <script>
        // 页面加载完成后显示复习数据
        document.addEventListener('DOMContentLoaded', function() {
            displayReviewData();
        });

        // 显示复习数据
        function displayReviewData() {
            const reviewContainer = document.getElementById('reviewContainer');
            
            // 获取所有句子记录
            const allRecords = Object.values(ProgressData.sentenceRecords);
            
            if (allRecords.length === 0) {
                reviewContainer.innerHTML = '<div class="no-data">暂无学习记录</div>';
                return;
            }
            
            // 筛选出有下次复习时间的记录并按时间排序
            const recordsWithNextReview = allRecords
                .filter(record => record.nextReview > 0)
                .sort((a, b) => a.nextReview - b.nextReview);
            
            if (recordsWithNextReview.length === 0) {
                reviewContainer.innerHTML = '<div class="no-data">暂无需要复习的句子</div>';
                return;
            }
            
            // 生成复习数据HTML
            let html = '';
            recordsWithNextReview.forEach(record => {
                const nextReviewDate = new Date(record.nextReview);
                const now = new Date();
                const timeDiff = record.nextReview - now.getTime();
                const daysRemaining = Math.ceil(timeDiff / (24 * 60 * 60 * 1000));
                
                // 查找对应的句子
                const sentence = sentenceData.find(s => s.id === record.id);
                const sentenceText = sentence ? sentence.text : '未知句子';
                
                html += `
                <div class="review-item">
                    <h3>${sentenceText}</h3>
                    <span class="level">掌握级别: ${record.level}/5</span>
                    <span class="date">下次复习时间: ${nextReviewDate.toLocaleString()}</span>
                    <p>剩余天数: <span class="days">${daysRemaining > 0 ? daysRemaining + ' 天' : '今天'}</span></p>
                </div>
                `;
            });
            
            reviewContainer.innerHTML = html;
            
            // 同时在控制台打印数据
            console.log('===== 下次复习数据 =====');
            recordsWithNextReview.forEach(record => {
                const nextReviewDate = new Date(record.nextReview);
                const now = new Date();
                const timeDiff = record.nextReview - now.getTime();
                const daysRemaining = Math.ceil(timeDiff / (24 * 60 * 60 * 1000));
                
                const sentence = sentenceData.find(s => s.id === record.id);
                const sentenceText = sentence ? sentence.text : '未知句子';
                
                console.log(`句子: ${sentenceText}`);
                console.log(`句子 ID: ${record.id}`);
                console.log(`掌握级别: ${record.level}/5`);
                console.log(`下次复习时间: ${nextReviewDate.toLocaleString()}`);
                console.log(`剩余天数: ${daysRemaining > 0 ? daysRemaining + ' 天' : '今天'}`);
                console.log('------------------------');
            });
        }
    </script>
</body>
</html>